<template>
  <div>
    <card ref="Card" v-show="isShow">
      <div slot="header">
        <el-input placeholder="搜索" v-model="searchTitle" class="w-200" clearable @keyup.enter.native="getNews"/>
        <el-button type="success" class="ml-5" @click="getNews">搜索</el-button>
        <el-button class="float-right" type="primary" @click="add">新增</el-button>
      </div>
      <el-button :disabled="deleteList.length === 0" type="danger" @click="deleteMore">批量删除</el-button>
      <selection-table :keys.sync="deleteList" :data="formData">
        <el-table-column prop="title" show-overflow-tooltip label="标题(中文)"></el-table-column>
        <el-table-column prop="laosTitle" show-overflow-tooltip label="标题(老挝)"></el-table-column>
        <el-table-column label="新闻封面">
          <template slot-scope="scope">
            <el-avatar
                style="width: 200px;height: 160px"
                shape="square"
                :src="$baseApi + scope.row.cover">
              <img src="../../../assets/notFound.png" alt="cover"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | formatDateTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click.stop="edit(scope.row)"></el-button>
            <delete-button
                :ref="scope.row.id"
                :id="scope.row.id"
                @start="deleteNews"/>
          </template>
        </el-table-column>
      </selection-table>
      <pagination ref="Pagination" @update="getNews"></pagination>
    </card>
    <news-detail
        v-show="!isShow"
        ref="NewsDetail"
        @update="getNews">
    </news-detail>
  </div>
</template>

<script>
  import {pageArticleApi, delArticleApi} from '@/api/website/article'
  import {objectEvaluate} from "@/utils/common";
  import NewsDetail from './detail';

  export default {
    name: 'News',
    components: {NewsDetail},
    data() {
      return {
        formData: [],
        searchTitle: '',
        isShow: true,
        deleteList: []
      }
    },
    mounted() {
      this.getNews();
    },
    methods: {
      getNews() {
        this.$refs.Card.start();
        let pagination = this.$refs.Pagination;
        let param = {
          current: pagination.current,
          size: pagination.size,
          title: this.searchTitle,
          typeId: 1, // 1新闻 2公告
          isShow: true
        };
        pageArticleApi(param).then(result => {
          this.$refs.Card.stop();
          let response = result.resultParam.articlePage;
          this.formData = response.records;
          pagination.total = response.total;
        })
      },
      add() {
        this.isShow = false;
        let _this = this.$refs.NewsDetail;
        _this.title = '新增';
      },
      edit(obj) {
        let _this = this.$refs.NewsDetail;
        _this.title = '编辑';
        _this.id = obj.id;
        objectEvaluate(_this.form, obj);
        this.isShow = false;
      },
      deleteNews(id) {
        delArticleApi({ids: id})
          .then(() => {
            this.getNews();
            this.$refs[id].close()
          })
          .catch(() => {
            this.$refs[id].stop();
          })
      },
      deleteMore() {
        this.$msgBox().then(() => {
          delArticleApi({ids: this.deleteList})
            .then(() => {
              this.getNews()
            })
        })
      }
    }
  }
</script>
